$(function () {
    //裁剪框
    var $image = $('#image')
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)

  //上传文件
  $('#chooseAvatarbtn').on('click',function(){
      $('#chooseAvatar').click()
  })

  //input上传事件
  $('#chooseAvatar').on('change',function(){
      //查看标签内置方法，使用 console.dir()
      let file = this.files[0];
    
    //非空判断
    if(file === undefined){
        return layui.layer.msg('上传头像不能为空！')
    }
    
    //根据文件对象生成路径
    let url = URL.createObjectURL(file)
    console.log(url)

    //给浏览区域图片赋值
    $image
            .cropper("destroy")
            .attr('src',url)
            .cropper(options)
  })

  $('#uploadbtn').on('click',function(){
    var dataURL = $image 
        .cropper('getCroppedCanvas',{
            width:100,height:100
        }).toDataURL('image/png')
    //上传头像
    axios({
        method:'post',
        url:'/my/update/avatar',
        data:'avatar='+encodeURIComponent(dataURL)
    }).then(({data:res})=>{
        console.log(res.status)
        if(res.status != 0){
            return layui.layer.msg(res.message)
        }
        layui.layer.msg("恭喜您，更改用户头像成功！")
        window.parent.getUserInfo();
    })

  })


})
